<template>
  <div class="container">
    <van-tabs
      v-model:active="tabIndex"
      shrink
      title-inactive-color="#878B97"
      title-active-color="#000"
      color="#000"
      line-width="20px"
      background="#fff"
    >
      <van-tab title="充值账户">
        <tab-one ref="tabOnef"></tab-one>
      </van-tab>
      <van-tab title="奖励账户">
        <tab-one2 ref="tabOnef2"></tab-one2>
      </van-tab>
      <van-tab title="燃油值账户">
        <tab-two ref="tabTwof"></tab-two>
      </van-tab>
      <van-tab title="购买燃油包">
        <div class="mbox">
          <div
            class="mli"
            v-for="item in fuellList"
            :key="item.id"
            @click="handlePay(item)"
          >
            <div class="mfont">
              <div class="m0">
                {{ item.name
                }}<span style="font-size: 12px; color: #333"
                  >（一经售出 概不退换）</span
                >
              </div>
              <div class="m1">
                +{{ item.fuelQuantity
                }}<span>燃油值, {{ item.contributionValue }}贡献值</span>
              </div>
              <div class="m2">
                <span>花费</span>{{ item.capitalPrice }}<span>USDT</span>
              </div>
            </div>
            <div class="m3">立即购买</div>
          </div>
          <div class="mli2" @click="handlePay(diyFuel)">
            <div class="name2">
              {{ diyFuel.name }}
            </div>
            <span style="font-size: 12px; color: #333"
              >（一经售出 概不退换）</span
            >
            <div class="m3">立即购买</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <no-register />
    <van-dialog
      v-model:show="buyShow"
      :title="buySubmit.title"
      :show-confirm-button="false"
    >
      <div
        class="dbox"
        v-if="buySubmit.title !== '自定义购买'"
        style="padding: 14px 14px"
      >
       
        <div class="o1">
          <div class="o11">资金密码</div>
          <van-field
            v-model="buySubmit.password"
            placeholder="请输入资金密码"
            style="background-color: #000"
            type="password"
          />
        </div>
        <div style="margin-left:14px;">
        <van-radio-group v-model="buySubmit.buyType">
          <van-radio :name="0" @click="chooseBuy(0)"
            ><div class="ss1">
              充值账户: {{ walletInfo.capital?.balance }} USDT
            </div></van-radio
          >
          <van-radio :name="4" @click="chooseBuy(4)"
            ><div class="ss1">
              奖励账户: {{ walletInfo.capital?.frozen }} USDT
            </div></van-radio
          >
        </van-radio-group>
        <div
          class="hong"
          v-if="
            buySubmit.buyType === 0 &&
            walletInfo.capital?.balance < buySubmit.price
          "
        >
          充值账户余额不足
        </div>
        <div
          class="hong"
          v-if="
            buySubmit.buyType === 4 &&
            walletInfo.capital?.frozen < buySubmit.price
          "
        >
          奖励账户余额不足
        </div>
      </div>
        <div class="bbox">
          <div class="b1" @click="buyShow = false">取消</div>
          <div class="b1" @click="paySubmit">确定</div>
        </div>
      </div>
      <div
        class="dbox"
        v-if="buySubmit.title === '自定义购买'"
        style="padding: 14px 14px"
      >
        <div class="o1">
          <div class="o11">购买数量</div>
          <van-field
            v-model="buySubmit.buyNum"
            placeholder="请输入购买数量"
            style="background-color: #000"
            @change="handleNum"
            type="number"
          />
        </div>
        <div class="o1">
          <div class="o11">资金密码</div>
          <van-field
            v-model="buySubmit.password"
            placeholder="请输入资金密码"
            style="background-color: #000"
            type="password"
          />
        </div>
        <div style="margin-left:14px;">
        <van-radio-group v-model="buySubmit.buyType">
          <van-radio :name="0" @click="chooseBuy(0)"
            ><div class="ss1">
              充值账户: {{ walletInfo.capital?.balance }} USDT
            </div></van-radio
          >
          <van-radio :name="4" @click="chooseBuy(4)"
            ><div class="ss1">
              奖励账户: {{ walletInfo.capital?.frozen }} USDT
            </div></van-radio
          >
        </van-radio-group>
        <div
          class="hong"
          v-if="
            buySubmit.buyType === 0 &&
            walletInfo.capital?.balance < buySubmit.buyNum
          "
        >
          充值账户余额不足
        </div>
        <div
          class="hong"
          v-if="
            buySubmit.buyType === 4 &&
            walletInfo.capital?.frozen < buySubmit.buyNum
          "
        >
          奖励账户余额不足
        </div>
      </div>
        <div class="bbox">
          <div class="b1" @click="buyShow = false">取消</div>
          <div class="b1" @click="paySubmit">确定</div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script setup lang='ts'>
import TabOne from "./components/TabOne.vue";
import TabOne2 from "./components/TabOne2.vue";
import TabTwo from "./components/TabTwo.vue";
import NoRegister from "@/components/NoRegister";
import http from "@/utils/http";
import { ref, onMounted, watch, nextTick, computed } from "vue";
import { useStore } from "@/store";
import { Dialog, Toast } from "vant";
const tabIndex = ref(0);
const store = useStore();
const diyFuel = ref<any>({});
const fuellList = ref<any[]>([]);
const buyShow = ref(false);
const walletInfo = computed(() => store.state.users.wallet);

const buySubmit = ref({
  buyType: 0,
  buyNum: "",
  title: "",
  id: "",
  price: 0,
  password: "",
});

const getFuelList = () => {
  http.get("user/fuel_set_meal/option").then((res: any) => {
    if (res.code === 0) {
      fuellList.value = res.data.filter((v: any) => v.fuelQuantity);
      diyFuel.value = res.data.find((v: any) => !v.fuelQuantity);
    }
  });
};
onMounted(() => {
  console.log("22222", Number(localStorage.getItem("ali_tabIndex")));
  tabIndex.value = Number(localStorage.getItem("ali_tabIndex")) || 0;
  store.dispatch("users/getUserWalletInfo");
});
const tabOnef = ref(null);
const tabOnef2 = ref(null);
const tabTwof = ref(null);

watch(
  tabIndex,
  (newVal, oldVal) => {
    localStorage.setItem("ali_tabIndex", newVal + "");
    nextTick(() => {
      // if (newVal === 0) {
      //   tabOnef.value.getList();
      // }
      if (newVal === 2) {
        tabTwof.value.getList();
      } else if (newVal === 3) {
        getFuelList();
      }
    });
  },
  {
    immediate: false,
  }
);
const handleNum = () => {
  if (Number.isNaN(+buySubmit.value.buyNum)) {
    buySubmit.value.buyNum = "0";
  } else {
    buySubmit.value.buyNum =
      parseFloat((+buySubmit.value.buyNum).toFixed(6)) + "";
  }
};
const paySubmit = () => {
  if (buySubmit.value.title === "自定义购买" && !buySubmit.value.buyNum) {
    Toast("请输入购买数量");
    return;
  }
  if (
    buySubmit.value.buyType === 0 &&
    walletInfo.value.capital?.balance <
      (buySubmit.value.title === "自定义购买"
        ? buySubmit.value.buyNum
        : buySubmit.value.price)
  ) {
    Toast("充值账户余额不足");
    return;
  }
  if (
    buySubmit.value.buyType === 4 &&
    walletInfo.value.capital?.frozen <
      (buySubmit.value.title === "自定义购买"
        ? buySubmit.value.buyNum
        : buySubmit.value.price)
  ) {
    Toast("奖励账户余额不足");
    return;
  }
  if (!buySubmit.value.password) {
    Toast("请输入资金密码");
    return;
  }
  buyShow.value = false;
  http
    .post("user/transfer_detailed", {
      fuelSetMealId: buySubmit.value.id,
      currency: "USDT",
      type: buySubmit.value.buyType,
      quantity: buySubmit.value.buyNum,
      password: buySubmit.value.password,
    })
    .then((res: any) => {
      if (res.code === 0) {
        Toast("购买成功");
        store.dispatch("users/getUserWalletInfo");
      }
    });
};
const chooseBuy = (type: number) => {
  if (type === 0 && walletInfo.value.capital?.balance < buySubmit.value.price) {
    return;
  }
  if (type === 4 && walletInfo.value.capital?.frozen < buySubmit.value.price) {
    return;
  }
  buySubmit.value.buyType = type;
};
const handlePay = (item: any) => {
  buySubmit.value.price = item.fuelQuantity;
  buySubmit.value.title =
    item.fuelQuantity === 0 ? "自定义购买" : item.name || "套餐购买";
  buySubmit.value.id = item.id;
  buySubmit.value.buyType = 0;
  buySubmit.value.buyNum = "";
  buySubmit.value.password = "";
  buyShow.value = true;
  // Dialog({
  //   title: "提示",
  //   showCancelButton: true,
  //   message: "确定购买燃油包?",
  // })
  //   .then(() => {
  //     http
  //       .post("user/transfer_detailed", {
  //         fuelSetMealId: id,
  //         currency: "USDT",
  //       })
  //       .then((res: any) => {
  //         if (res.code === 0) {
  //           Toast("购买成功");
  //           store.dispatch("users/getUserWalletInfo");
  //         }
  //       });
  //   })
  //   .catch(() => {
  //     // on cancel
  //   });
};
</script>
    
<style lang="scss" scoped>
.o1 {
  margin: 10px 0;
  display: flex;
  align-items: center;
  padding-left: 14px;
  .o11 {
    font-size: 14px;
    flex: 0 0 60px;
  }
}
.mbox {
  // margin-top: 45px;
  padding: 10px 14px 0;
  .mli2 {
    width: 100%;
    height: 100px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
    background: url("@/assets/images/yhq.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .name2 {
      font-size: 15px;
      position: absolute;
      color: #412301;
      font-weight: 600;
      left: 30px;
      top: 28px;
    }
    span {
      font-size: 17px;
      position: absolute;
      font-weight: 600;
      left: 30px;
      bottom: 28px;
    }
    .m3 {
      font-size: 14px;
      position: absolute;
      top: 50%;
      right: 24px;
      line-height: 18px;
      word-wrap: break-word;
      transform: translateY(-50%);
      width: 20px;
      color: #fff;
      font-weight: 600;
      span {
        font-size: 13px;
      }
    }
  }
  .mli {
    width: 100%;
    height: 100px;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 10px;
    background: url("@/assets/images/yhq.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    .mfont {
      height: 68px;
      position: absolute;
      top: 50%;
      left: 30px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .m1 {
      font-size: 22px;
      font-weight: 600;
      color: #fff;
      span {
        font-size: 13px;
      }
    }
    .m0 {
      font-size: 13px;
      color: #412301;
      font-weight: 600;
    }
    .m2 {
      font-size: 17px;
      color: #a41010;
      font-weight: 600;
      span {
        font-size: 12px;
      }
    }
    .m3 {
      font-size: 14px;
      position: absolute;
      top: 50%;
      right: 24px;
      line-height: 18px;
      word-wrap: break-word;
      transform: translateY(-50%);
      width: 20px;
      color: #fff;
      font-weight: 600;
      span {
        font-size: 13px;
      }
    }
  }
}
.bbox {
  height: 30px;
  margin-top: 20px;
  display: flex;
  .b1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
}
.bli {
  padding: 10px 20px;
  display: flex;
  width: 100%;
  // height: 50px;
  border-radius: 4px;
  background: #f1f1f1;
  margin-bottom: 10px;
  font-size: 14px;
  flex-direction: column;
  justify-content: center;
  .bli2 {
    font-size: 12px;
    color: #000;
    margin-top: 10px;
  }
}
.bli-active {
  background: #36b4ea;
  color: #fff;
}
.hong {
  font-size: 12px;
  margin:10px 0;
  color: #bb0e0e !important;
}
.ss1 {
  font-size: 13px;
  line-height: 40px;
}
</style>